<template>
  <div class="about">
    <div class="top">
      <div class="box">
        <div class="top-logo">logo</div>
        <div class="top-home" @click="tohome">
          <div class="top-home-icon"><i class="el-icon-s-home"></i></div>
          <div>首页</div>
        </div>
      </div>
    </div>
    <div class="warn">
      <div class="warn-content">
        <div><i class="el-icon-warning"></i></div>
        <div class="content">
          依据《网络安全法》，为保障您相关功能的正常使用，账号需绑定手机，如您未绑定则登录后会引导您操作绑定。
          新版《隐私政策》已上线，感谢您的支持。
        </div>
      </div>
    </div>
    <div class="cneter">
      <div class="cneter1">
        <div class="login">
          <div class="login1">
            账号密码登录
          </div>
          <div class="login2"><el-input v-model="username" size="small" placeholder="请输入账号"></el-input></div>
          <div class="login2"><el-input placeholder="请输入密码" size="small" v-model="password" show-password></el-input></div>
          <div class="login3"><el-button size="small" type="primary" plain>登录</el-button></div>
          <div class="login4">
            <div><a href="#">验证码登录</a></div>
            <div><a href="#">免费注册</a></div>
          </div>
        </div>
      </div>
      
    </div>
    <div class="bottom">
        <div class="bottom1">

        </div>
        <div class="bottom1">

        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LoginView",
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods:{
    tohome(){
      console.log("111")
      this.$router.push('home')
    }
  }
};
</script>
<style lang="less" scoped>
.about {
  position: relative;
  .top {
    width: 1200px;
    margin: 0 auto;

    .box {
      height: 70px;
      width: 90%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      line-height: 70px;

      .top-home {
        .top-home-icon {
          margin-right: 5px;
          position: relative;
          top: 2px;
          color: rgb(86, 120, 168);
        }

        font-size: 10px;
        display: flex;
        i {
          font-size: 20px;
        }
      }
      .top-home:hover {
        .top-home-icon {
          color: rgb(0, 134, 246);
        }
        color: rgb(0, 134, 246);
      }
    }
  }
  .warn {
    height: 30px;
    background-color: rgb(255, 252, 216);
    font-size: 10px;
    line-height: 30px;
    margin: 0 auto;
    position: relative;
    .warn-content {
      i {
        position: relative;
        top: 2px;
        margin-right: 2px;
        font-size: 14px;
        color: rgb(255, 176, 39);
      }
      .content {
        color: rgb(102, 102, 102);
        font-size: 8px;
      }
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      width: 850px;
    }
  }
  .cneter {
    background-color: rgb(96, 177, 230);
    // background-color: red;
    height: 400px;
    position: relative;

    .cneter1 {
      width: 1200px;
      height: 400px;
      background-image: url("./pic/p2.jpg");
      background-size: auto 100%;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      .login {
        position: absolute;
        height: 310px;
        width: 280px;
        border-radius: 5px;
        top: 40px;
        left: 700px;
        background-color: white;
        .login1{
          margin: 15px 20px;
          font-size: 18ppx;
        }
        .login2{
          width: 240px;
          margin: 20px 20px;
        }
        .login3{
          button{
            width: 240px;
          }
          width: 240px;
          margin: 20px 20px;
        }
        .login4{
          margin: 20px;
          display: flex;
          font-size: 10px;
          justify-content: space-between;
        }
      }
    }
  }
  .bottom {
    width: 1000px;
    height: 270px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    .bottom1{
      margin-top: 50px;
      width: 500px;
      height: 210px;
      background-image: url("./pic/p1.png");
    }
  }
}
</style>
